// pages/cart/component/cart.js
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import {userStore} from "@/store/userStore"
import {reqCartList,reqUpdateChecked,reqCheckAllCart, reqAddCart,reqDelCart } from "@/apis/cart"
// 从 miniprogram-licia 导入防抖函数
import { debounce } from 'miniprogram-licia'
// 引入 miniprogram-computed
const computedBehavior = require('miniprogram-computed').behavior
// 导入让删除滑块自动弹回的 behavior
import {swipeCellBehavior} from "@/behaviors/swipeCell"
ComponentWithStore({
storeBindings: {
      store: userStore,
      fields: ['token']
    },
// 注册计算属性和删除滑块自动弹回
  behaviors: [computedBehavior,swipeCellBehavior],
 // 组件的初始数据
 data: {
  cartList: [],
  emptyDes: '还没有添加商品，快去添加吧～'
},
  // 组件的方法列表
 methods: {
   // 处理页面的展示
async showTipList() {
  // 将 token 进行解构
     const { token } = this.data
      // 1. 如果没有登录，购物车列表，展示文案：您尚未登录，点击登录获取更多权益
    if (!token) {
        this.setData({
          emptyDes: '您尚未登录，点击登录获取更多权益',
          cartList: []
        })
        return
      }else{
          // 获取商品列表数据
     const { data: cartList, code } = await reqCartList()
     if (code === 200) {
       // 2. 如果用户登录，购物车列表为空，展示文案： 还没有添加商品，快去添加吧～
       this.setData({
         cartList,
         emptyDes: cartList === 0 && '还没有添加商品，快去添加吧～'
       })
     }
      }
     
   },
   //点击商品的复选框时，更新商品的购买状态
async updateChecked(e){
     // 获取商品的id和索引
     const {id,index}=e.currentTarget.dataset
     // 获取最新的选中状态
     const {detail} =e
    // 将最新的状态格式化成后端所需要的数据格式
    const isChecked=detail ? 1 : 0
    // 调用接口，传入参数，更新商品的状态
    const res = await reqUpdateChecked(id, isChecked)
    if(res.code ==200){
      //2种方法获取更新后复选框状态：
      //获取最新购物车列表，获取更新后复选框状态
      // this.showTipList()
      //获取复选框的索引index,获取更新后复选框状态
      this.setData({
        [`cartList[${index}].isChecked`] :isChecked
      })
    }
   },
   //全选和全不选功能
async  changeAllStatus(e){
     //获取最新全选和全不选
    const {detail} =e
    const isChecked =detail ? 1 :0
       // 调用接口，更新服务器中商品的状态
       const res = await reqCheckAllCart(isChecked)
       if(res.code ===200){
         //2种实现全选与全不选
         //更新购物车列表
         // this.showTipList()
         //通过深拷贝获取更新后购物车列表，
           // 将数据进行拷贝
        const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
        // 将数据进行更改
        newCartList.forEach((item) => (item.isChecked = isChecked))

        // 进行赋值
        this.setData({
          cartList: newCartList
        })
       }
   },
   // 更新购买的数量
   changeBuyNum:debounce(async function (event) {
      // 获取商品的 ID 和 索引和之前购物数量
  const {id,index,buyoldnum} =event.currentTarget.dataset
  const {detail} =event
  //获取最新的购买数量
  let updateBuyNum =detail > 200 ? 200 : detail
    // 验证用户输入的值，是否是 1 ~ 200 直接的正整数
    const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      // 对用户输入的值进行验证
    const regRes =reg.test(updateBuyNum)
    // 如果验证没有通过，需要重置为之前的购买数量
    if(!regRes){
      this.setData({
          [`cartList[${index}].count`] :buyoldnum
      })
      return
    }
    // 如果通过，需要计算差值，然后将差值发送给服务器，让服务器进行逻辑处理
    let disCount = updateBuyNum-buyoldnum
     // 如果购买数量没有发生改变，不发送请求
    if (disCount === 0) return
    
  // 发送请求：购买的数量 和 差值
  const res = await reqAddCart({ goodsId:id, count: disCount })
 if(res.code ===200){
  this.setData({
    [`cartList[${index}].count`]:updateBuyNum,
  //如果购买的数量发生变化，就让该商品处于选中状态
    [`cartList[${index}].isChecked`]:1
  })
  
 }
   },500),
  //删除购物车中的商品
async delCartGoods(e){
     // 获取需要删除商品的 id
    const { id } = e.currentTarget.dataset
    // 询问用户是否删除该商品
    const modalRes = await wx.modal({
          content: '您确认删除该商品吗 ?'
        })
        if (modalRes) {
          await reqDelCart(id)
          this.showTipList()
        }
      },
 onShow() {
  this.showTipList()
 },
 onHide() {
      // 在页面隐藏的时候，需要让删除滑块自动弹回
      this.shutonSwiperCell()
    },
  //跳转到订单结算页面
  toOrder(){
    if(this.data.totalPrice ===0){
      wx.toast({title:'请选择你要购买商品'})
      return
    }
      wx.navigateTo({
        url: '/modules/orderModule/pages/order/detail/detail'
      })
  
   
    
  }
}, 
//  基于购物车列表中已有的数据，产生一个新的数据，来控制全选按钮的选中效果，可以使用 计算属性 来实现
computed:{
  // 判断是否全选
   // computed 函数中不能访问 this ，如果想访问data的数据，需要使用形参
   // 这个函数的返回值会被设置到 this.data.selectAllStatus 字段中
   selectAllStatus(data){
    return (
      data.cartList.length !==0 && data.cartList.every(item => item.isChecked ===1)
      
    )
    
   },
   // 计算商品价格总和
   totalPrice (data){
     let totalPrice =0
    data.cartList.forEach(item =>{
      if(item.isChecked === 1){
        totalPrice += item.price * item.count
      }
    })
    return totalPrice
   }
}
})

